<template>
	<div class="feed-container">
		<nav-bar title="消息提醒" :custom-back="true" @on-back="handleBack" />
		<!-- 顶部切换栏 -->
		<div class="apply-top">
			<span v-for="item in titleList" :key="item.id" :class="['tab-item', { active: item.id === curId }]"
				@click="typeTap(item.id)">
				{{ item.name }}
			</span>
			<van-button v-if="curId === 1" size="mini" @click="handleAllRead" class="read-all-btn">
				全部已读
			</van-button>
		</div>

		<!-- 列表内容 -->
		<div class="list-container">
			<div v-for="item in list" :key="item.id" class="flex-row" @click="goDetail(item.id, item.isRec)">
				<div class="flex-col">
					<img class="notice-icon" src="@/assets/images/tongzhi@2x.png" />
					<div v-if="curId === 1 && shouldShowUnread(item)" class="point" />
				</div>
				<div class="flex-col2">
					<div class="text-wrapper_1">
						<span class="text_7">{{ item.title }}</span>
						<span class="text_8">{{ item.createTime }}</span>
					</div>
					<div class="text-wrapper_2">{{ item.content }}</div>
				</div>
			</div>

			<!-- 加载状态 -->
			<van-empty v-if="total === 0" description="暂无数据" />
			<div v-else class="bottom-tip">
				<van-loading v-if="isLoading" size="24px">加载中...</van-loading>
				<span v-else-if="list.length >= total">已加载全部数据~</span>
			</div>
		</div>

		<!-- 悬浮按钮 -->
		<div class="float-btn" @click="goAnnunciateAdd">
			<img src="@/assets/images/fabu@2x.png" />
		</div>
	</div>
</template>
<script>
	import NavBar from '@/components/NavBar'
	import {
		listNotice,
		doReadAllNotice
	} from "@/api/annunciate.js"
	import {
		Toast,
		Dialog
	} from 'vant'


	export default {
		name: 'FeedList',
		components: {
			NavBar
		},
		data() {
			return {
				curId: 1,
				titleList: [{
						name: '我接收的',
						id: 1
					},
					{
						name: '我发布的',
						id: 2
					}
				],
				list: [],
				isLoading: true,
				total: null,
				hasNextPage: true,
				pageNum: 1,
				pageSize: 8,
				user: []
			}
		},

		created() {
			this.user = JSON.parse(localStorage.getItem('user'))
			this.getListData()
		},

		methods: {
			handleBack() {
				this.$router.push('/home')
			},

			shouldShowUnread(item) {
				return (item.isNeedSign === 0 && item.isRead !== 1) ||
					(item.isNeedSign === 1 && item.isRec === 0)
			},

			async getListData() {
				try {
					const url = this.curId === 1 ? 'listRecNotice' : 'listReleaseNotice'
					listNotice(url, {
							openSessionId: this.user.openSessionId,
							pageNum: this.pageNum,
							pageSize: this.pageSize,
						})
						.then(res => {
							if (res.code === 200) {
								this.list = res.rows
								this.total = res.total
								this.hasNextPage = res.pageNum < res.totalPage
							} else {
							Toast.error(res.message);
						}
						})
				} catch (err) {
					Toast('获取列表失败')
				} finally {
					this.isLoading = false
				}
			},

			async handleAllRead() {
				const unreadCount = this.list.filter(item => item.isRead !== 1).length

				if (unreadCount === 0) {
					Toast('没有未读通告！')
					return
				}

				try {
					doReadAllNotice(url, {
							openSessionId: this.user.openSessionId,
						})
						.then(res => {
							if (data.code === 200) {
								Toast.success(data.message)
								this.resetList()
							} else {
								Toast.error(data.message)
							}
						})
				} catch (err) {
					Toast.fail('获取列表失败')
				} finally {
					this.isLoading = false
				}


			},

			resetList() {
				this.list = []
				this.pageNum = 1
				this.total = null
				this.hasNextPage = true
				this.getListData()
			},

			goDetail(id, isRec) {
				this.$router.push(`/annunciateDetail?id=${id}&curId=${this.curId}&isRec=${isRec}`)
			},

			goAnnunciateAdd() {
				this.$router.push('/annunciateAdd')
			},

			typeTap(id) {
				this.curId = id
				this.resetList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feed-container {
		background: #f5f5f5;
		padding-top: 10px;
		min-height: 100vh;

		.apply-top {
			margin: 0 0 10px;
			height: 40px;
			display: flex;
			padding: 0 10px;
			align-items: center;
			background: #fff;
			position: relative;
			margin-top: 44px;

			.tab-item {
				height: 40px;
				line-height: 40px;
				width: 90px;
				text-align: center;
				margin-right: 20px;
				color: #888;

				&.active {
					border-bottom: 2px solid #4c80e0;
					color: #4c80e0;
					font-weight: bold;
				}
			}

			.read-all-btn {
				position: absolute;
				right: 10px;
				height: 24px;
				font-size: 12px;
				color: #2979ff;
				border-color: #2979ff;
			}
		}

		.list-container {
			padding: 0 10px;
			margin-bottom: 20px;
		}

		.flex-row {
			margin: 10px 0;
			background: white;
			border-radius: 5px;
			border: 1px solid #ddd;
			padding: 5px;
			display: flex;
			justify-content: space-between;

			.flex-col {
				margin: 5px;
				width: 50px;
				height: 50px;
				position: relative;

				.notice-icon {
					height: 50px;
					width: 50px;
				}

				.point {
					height: 9px;
					width: 9px;
					background: #e52323;
					position: absolute;
					top: -4px;
					right: -4px;
					border-radius: 50%;
				}
			}

			.flex-col2 {
				width: calc(100% - 70px);
				text-align: left;
				height: 50px;
				margin: 5px;
			}
		}
		
		.text-wrapper_1 {
		    display: flex;
		    justify-content: space-between;
		    height: 50rpx;
		    line-height: 50rpx;
		
		
		 .text_7 {
		    color: #333333;
		    font-weight: bold;
		    width: calc(100% - 300rpx);
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		}
		
		 .text_8 {
		    display: inline-block;
		    width: 300rpx;
		    text-align: right;
		    color: #999999;
		    font-size: 28rpx;
		}
		}
		.text-wrapper_2 {
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    height: 50rpx;
		    line-height: 50rpx;
		    color: #888888;
		    font-size: 28rpx;
		}
		
		

		.float-btn {
			position: fixed;
			right: 20px;
			bottom: 70px;
			z-index: 99;

			img {
				height: 80px;
				width: 80px;
			}
		}
	}
</style>